soniCaH / KCVV-Elewijt-Gatsby

import { PropTypes } from "prop-types"

import React, { Component } from "react"

import { PlayerMinimal } from "./objects/player"

import "./player--featured.scss"

class PlayerFeatured extends Component {

  renderPlayerHeader = () => (

    <header className={`player--featured__header`}>

      <div className={`bg-green-mask--horizontal`}>

        <div

          className={`player--featured__bg-avatar`}

          style={{ backgroundImage: `url(${this.props.player.imageSrc})` }}

        />

        <div className={`bg-white-end`} />

      </div>

    </header>

  )

  renderPlayerStats = () => (

    <aside className={`player--featured__statistics`}>

      {this.renderGamesPlayed(this.props.player.gamesPlayed)}

      {this.props.player.position === `k` && this.renderCleansheets(this.props.player.cleanSheets)}

      {this.props.player.position !== `k` && this.renderGoals(this.props.player.goalsScored)}

      {this.renderCards(this.props.player.cardsYellow, `yellow`)}

      {this.renderCards(this.props.player.cardsRed, `red`)}

    </aside>

  )

  renderPlayerLink = () => (

    <footer className={`player--featured__footer`}>

      <Link to={this.props.player.link} className="rich-link">

        Meer over {this.props.player.nameFirst} »

      </Link>

    </footer>

  )

  renderPlayerName = () => (

    <div className={`player--featured__name__wrapper`}>

      <h1 className={`player--featured__name`}>

        <span className={`player--featured__name-first`}>{this.props.player.nameFirst || `John`}</span>

        <span className={`player--featured__name-last`}>{this.props.player.nameLast || `Doe`}</span>

      </h1>

      <div className={`player--featured__bg-shirt-number`} aria-hidden="true">

        {this.props.player.shirtNr || `0`}

      </div>

    </div>

  )

  renderCleansheets = (cleanSheets) => (

    <section className={`player--featured__statistics-item`}>

      <div className={`player--featured__statistics-item__number`}>{cleanSheets || `0`}</div>

      <div className={`player--featured__statistics-item__label`}>Cleansheets</div>

    </section>

  )

  renderGoals = (goalsScored) => (

    <section className={`player--featured__statistics-item`}>

      <div className={`player--featured__statistics-item__number`}>{goalsScored || `0`}</div>

      <div className={`player--featured__statistics-item__label`}>Doelpunten</div>

    </section>

  )

  renderCards = (cards, color) => (

    <section className={`player--featured__statistics-item player--featured__statistics-item--cards`}>

      <div className={`player--featured__statistics-item__number`}>{cards || `0`}</div>

      <div className={`player--featured__statistics-item__label`}>

        <span className={`stats__card stats__card--${color}`}></span>

      </div>

    </section>

  )

  render() {

    return (

      <article className={`player--featured`}>

        {this.renderPlayerHeader()}

        <section className={`player--featured__content`}>

          {this.renderPlayerName()}

          {this.renderPlayerStats()}

          {this.props.player.link && this.renderPlayerLink()}

        </section>

      </article>

    )

  }

}

PlayerFeatured.propTypes = {

  player: PropTypes.instanceOf(PlayerMinimal).isRequired,

}

export default PlayerFeatured